<template>
    <div class="top">
        <div class="conter">
            <ul>
                <li class="liebiao"><i class="iconfont icon-liebiao1"></i></li>
                <!--                <li class="btn"><i class="iconfont icon-ai-ios"></i></li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <!--                <li class="text">Mac</li>-->
                <li class="seerch"><i class="iconfont icon-sousuo"></i></li>
                <li class="btn"><i class="iconfont icon-bag"></i></li>
            </ul>
        </div>
    </div>
    <!--导航结束-->
    <header>
        <div class="navbar">
            <div class="navbar-left">
                <span class="nav-city"> <i class="icon-downarrow"></i></span>
            </div>
            <div class="nav-search">
                <input type="text" placeholder="">
            </div>
        </div>
    </header>
    <main>
        <div class="banners">
            <img src="images/download_banner.png" alt="广告图">
        </div>
        <nav class="navlist">
            <div class="view">
                <div :class="{banner:true,trans:flag}"  @mouseenter="enter" @mouseleave="leave">
                    <img  :src="imagesUrl[imgindex]" alt="" class="img">
                </div>
                <ul class="uls">
                    <li class="lis" v-for='(item,index) in 5' @click='select(index)' :class='{con:index==sl}'></li>
                    <!-- 点击小圆点切换对应图片展示 -->
                </ul>
            </div>
        </nav>
        <div class="pintuan boxWrapper">
            <h4 class="title">大厂推荐</h4>
            <div class="box-list">
                <div class="box-item" v-for="(k,v) in list" :key="v" @click="detail(k)" v-show="v<'2'">
                    <img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3593127184,496744818&fm=74&app=80&f=PNG?w=200&h=200&s=40B18C72CF887EC01CC5C9460300F0B3" alt="美食团" style="height: 175px">
                    <div class="item-title">{{k.companyName}}</div>
                    <div class="price">
                        <span class="strong">￥{{k.companyId}}/小时</span>
                        <span class="line-price">￥{{k.createUser}}/小时</span>
                    </div>
                </div>
            </div>
<!--            <div class="box-list">-->
<!--                <div class="box-item" v-for="(k,v) in listse" :key="v" @click="detail(k)">-->
<!--                    <img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3593127184,496744818&fm=74&app=80&f=PNG?w=200&h=200&s=40B18C72CF887EC01CC5C9460300F0B3" alt="美食团" style="height: 175px">-->
<!--                    <div class="item-title">{{k.name}}</div>-->
<!--                    <div class="price">-->
<!--                        <span class="strong">￥{{k.money}}/小时</span>-->
<!--                        <span class="line-price">￥{{k.moneys}}/小时</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="guesslike">
            <div class="title">- 合作厂家 -</div>
            <ul class="list">
                <li class="guessItem" v-for="(k,v) in list" :key="v" @click="detail(k)">
                    <a href="javascript:void(0)" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=233755216,1322610938&fm=58" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">{{k.companyName}}</div>
                                <div class="item-title">{{k.companyAddr}}</div>
                                <div class="price">
                                    <span class="strong">{{k.createUser}}元/小时</span>
<!--                                    <span class="retail">{{k.contacts}}</span>-->
                                    <span class="selNum">距离{{k.companyId}}km</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
<!--                <li class="guessItem" v-for="(k,v) in lists" :key="v" @click="detail(k)">-->
<!--                    <a href="javascript:void(0)" class="item-href">-->
<!--                        <div class="item-box">-->
<!--                            <div class="item-img">-->
<!--                                <img :src=k.img alt="预览图">-->
<!--                            </div>-->
<!--                            <div class="item-des">-->
<!--                                <div class="item-name">{{k.title}}</div>-->
<!--                                <div class="item-title">{{k.name}}</div>-->
<!--                                <div class="price">-->
<!--                                    <span class="strong">{{k.money}}元/小时</span>-->
<!--                                    <span class="retail">{{k.text}}</span>-->
<!--                                    <span class="selNum">距离{{k.add}}km</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </li>-->
            </ul>
            <div style="height: 40px"></div>
        </div>
    </main>
    <footer>
        <nav>
            <ul class="nav-menu">
                <li class="nav-item" style="padding: 16px 0">
                    <i class="iconfont2"></i>
                    <span style="color: #ff0000">新广源招聘</span>
                </li>
                <li class="nav-item" style="padding: 16px 0" @click="jump('/mobileIndex')">
                    <i class="iconfont2 "></i>
                    <span>公司首页</span>
                </li>
                <li class="nav-item" style="padding: 16px 0" @click="jump('/mobileForm')">
                    <i class="iconfont2 "></i>
                    <span>自主入职</span>
                </li>
            </ul>
        </nav>
    </footer>
</template>

<script>
    import { userApi } from "@/api";
    import { wordTimeApi, companyApi } from "@/api";
    export default {
        name: "mobileForm",
        data() {
            return {
                imgindex:'0',//控制变量，默认显示第一张
                imagesUrl:[
                    "https://img1.baidu.com/it/u=3749985758,1082282631&fm=26&fmt=auto&gp=0.jpg",
                    "https://img0.baidu.com/it/u=659609762,3367411885&fm=26&fmt=auto&gp=0.jpg",
                    "https://img1.baidu.com/it/u=720905768,3174074102&fm=26&fmt=auto&gp=0.jpg",
                    "https://img1.baidu.com/it/u=1916402477,832614707&fm=26&fmt=auto&gp=0.jpg",
                ],
                list:[],
                // listse:[
                //     {
                //         title:'富士康小时工',
                //         name:'富士康电子厂',
                //         img:'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1ebbf8461acbb5d7523edfed93404adf_fullsize.jpg',
                //         money:'24',
                //         moneys:'19',
                //         text:'合同工',
                //         add:'10.3',
                //     },
                //     {
                //         title:'纬创资通小时工',
                //         name:'纬创资通',
                //         img:'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3593127184,496744818&fm=74&app=80&f=PNG?w=200&h=200&s=40B18C72CF887EC01CC5C9460300F0B3',
                //         money:'29',
                //         moneys:'20',
                //         text:'合同工',
                //         add:'15.3',
                //     },
                // ],
                // lists:[
                //     {
                //         title:'仁宝长白班小时工',
                //         name:'仁宝电子科技有限公司',
                //         img:'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=461702880,3734575968&fm=58',
                //         money:'18',
                //         text:'长白班',
                //         add:'4.3',
                //     },
                //     {
                //         title:'群创光电合同工',
                //         name:'群创光电公司',
                //         img:'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=233755216,1322610938&fm=58',
                //         money:'16',
                //         text:'合同工',
                //         add:'7',
                //     },
                //     {
                //         title:'名硕电脑小时工',
                //         name:'名硕电脑（苏州）有限公司',
                //         img:'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3457352115,4186820137&fm=58',
                //         money:'21',
                //         text:'两班倒',
                //         add:'7.7',
                //     },
                //     {
                //         title:'光宝集团长期工',
                //         name:'光宝集团',
                //         img:'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=359524569,1723386245&fm=58',
                //         money:'22',
                //         text:'坐班',
                //         add:'8.5',
                //     },
                //     {
                //         title:'深圳顺络电子小时工',
                //         name:'深圳顺络电子股份有限公司',
                //         img:'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2612016958,3355116384&fm=58',
                //         money:'14',
                //         text:'合同工',
                //         add:'22.8',
                //     },
                // ],
                flag:true,
                timer:null//定时器
            };
        },
        created() {
            this.timer=setInterval(this.next.bind(this),2000)
            //还可以使用箭头函数就不用bind
            // this.timer=serInterval(()=>{
            //     this.next()
            // },2000)
        },
        methods: {
            getData(){
                companyApi.getCompanyList().then((res) => {
                    if (res) {
                        this.list = res.records;
                        console.log(this.list);
                    }
                });
            },
            detail(e){
                let data = JSON.stringify(e)
                this.$router.push({path: '/mobileDetails',query: {res: data}});
            },
            jump(e) {
                this.$router.push(e);
            },
            //下一张
            next:function(){
                if(this.imgindex==this.imagesUrl.length-1){
                    this.imgindex=0;
                }else{
                    this.imgindex++;
                }
            },
            //上一张
            prev:function(){
                if(this.imgindex<0){
                    this.imgindex=this.imagesUrl.length-1
                }else{
                    this.imgindex--
                }
            },
            select(index){
                this.imgindex=index
                //通过点击小圆点获取对应的索引，进行赋值；
            },

        },
        mounted() {
            this.getData();
        }
    };
</script>

<style scoped>
    @font-face {
        font-family: "iconfont";
        src: url("//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109"); /* IE9*/
        src: url("//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */
        url("data:application/x-font-woff;charset=utf-8;base64,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")
        format("woff"),
        url("//at.alicdn.com/t/font_729087_fxjtm9wz32.ttf?t=1530501996109")
        format("truetype"),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("//at.alicdn.com/t/font_729087_fxjtm9wz32.svg?t=1530501996109#iconfont")
        format("svg"); /* iOS 4.1- */
    }
    *{
        margin:0;
        padding: 0;
    }
    body{
        background: #f9f7f8;
        padding: 45px 0 70px 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    header{
        /* margin-bottom: 7px; */
        position: fixed;
        top: 0;
        width: 100%;
        margin-bottom: 5px;
    }
    .navlist{
        padding-top: 15px;
        height: 205px;
    }
    .navbar{
        display: flex;
        background: #fff;
        height: 40px;
        color: black;
    }
    .navbar .navbar-left{
        height: 40px;
        line-height: 40px;
    }
    .navbar .nav-city{
        font-size: 14px;
        margin: 0 15px;
        font-weight: bolder;
    }

    .icon-downarrow{
        display: inline-block;
        width: 6px;
        height: 6px;
        border-left: 2px solid black;
        border-bottom: 2px solid black;
        transform: rotate(-45deg);
        margin: 0 0 3px 0;
    }

    .nav-search{
        flex: 1;
        background: #f3f3f3;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        padding:0 25px;
        margin: 5px 15px 0 0 ;
    }
    .nav-search input{
        display: block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        font-size: 14px;
        border: none;
        outline: none;
    }

    /* 广告图 */
    .banners img{
        width: 100%;
    }
    .banners{
        margin: 7px;
        background: #fff;
        box-shadow: 0px 1px 5px rgba(0, 0,0, 0.2);
    }

    /* 导航菜单 */

    .navlist{
        background: #fff;
    }

    .navlist ul{
        display: flex;
        flex-wrap: wrap;
    }

    .navlist .nav-item{
        flex: 0 0 20%;
        text-align: center;
    }

    .nav-item  .nav-icon{
        display: block;
        width: 40px;
        height: 40px;
        margin: auto;
        border-radius: 50%;
        background: #fd9121;
        margin:10px auto;
        color: #fff;
        font-size: 25px;
        line-height: 40px;
    }
    .nav-item .nav-des{
        color :#333;
        font-size:14px;
        /* font-weight: 500; */
    }

    /* 拼团 */
    .boxWrapper{
        background: #ffffff;
        margin-top: 10px;
        padding: 5px;
    }
    .boxWrapper h4{
        color: #333;
    }

    .box-item img{
        width: 100%;
        border-radius: 7px;
    }

    .box-list{
        display: flex;
        justify-content: space-between;
    }

    .box-list .box-item{
        display: inline-block;
        width: 47%;
        margin: 5px 5px;
        text-align: center;
    }

    .box-item .price .strong{
        font-size:18px;
        padding: 0 10px 0 0;
        color: #f63;
    }

    .box-item .item-title{
        font-size: 16px;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 15px;

    }

    .box-item .price .line-price{
        font-size:14px;
        text-decoration: line-through;
        color: #666666;
    }

    .guesslike{
        background: #fff;
        margin-top: 10px;
        padding: 0 10px ;
    }

    .guesslike .title{
        text-align:center;
        padding: 10px 0;
        border-bottom: 1px solid #ddd8ce;
        color: #666;
    }

    .guessItem .item-href{
        display: block;
        padding: 15px 0;
    }

    .guessItem .item-href .item-box{
        display: flex;
    }

    .guessItem .item-img{
        display: inline-block;
        width: 90px;
        margin: 0 15px;
        height: 90px;
    }

    .item-img img{
        width: 100%;
        height: 100%;
    }

    .guessItem .item-des{
        flex:1;
        margin-left:10px;
    }

    .guessItem .item-name{
        font-size: 18px;
        color: #333;
        margin-bottom: 8px;
    }
    .guessItem .item-title{
        color: #666;
        font-size: 15px;
        margin-bottom: 12px;
    }
    .guessItem .price{
        font-size: 14px;
        color: #666;
        position: relative;
    }
    .guessItem .price .strong{
        font-size: 20px;
        color: #ff0000;
    }

    .guessItem .price .strong::before{
        /* content: '\A5'; */
        font-size: 14px;
        color: #f00;
        margin-left: 5px;
    }

    .guessItem .price .selNum{
        position: absolute;
        font-size: 12px;
        right:10px;
        bottom: 4px;
    }

    .guesslike .guessItem{
        border-bottom: 1.5px solid #ddd8ce;
    }

    /* 底部菜单 */
    footer{
        position: fixed;
        bottom:0;
        width: 100%;
        background: #fff;
    }

    footer .nav-menu{
        display: flex;
    }
    .nav-item{
        flex:1;
        text-align: center;
        padding: 8px 0;
    }

    .nav-item a{
        display: block;
        color: #333;
    }

    .nav-item .iconfont2{
        display: block;
        font-size: 24px;
    }

    .nav-item .active{
        color: #f63;
    }

    .nav-item span {
        font-size: 14px;
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-sousuo:before {
        content: "\e613";
    }

    .icon-ai-ios:before {
        content: "\e631";
    }

    .icon-liebiao1:before {
        content: "\e649";
    }

    .icon-bag:before {
        content: "\e600";
    }

    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
    }

    .top {
        width: 100%;
        height: 44px;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        z-index: 999;
    }

    .conter {
        width: 1000px;
        height: 44px;
        margin: 0 auto;
    }

    .shop {
        width: 100%;
        overflow: hidden;
    }

    .conter ul {
        display: -webkit-flex; /* Safari */
        display: flex;
        list-style: none;
        justify-content: space-between;
    }

    .conter ul li {
        font-size: 14px;
        font-weight: 400;
        line-height: 44px;
        color: #fff;
    }

    .conter ul li:hover {
        color: #b6b6b6;
    }

    .liebiao {
        display: none;
    }

    .iconfont {
        font-size: 20px;
        font-weight: 400;
        line-height: 44px;
        color: #fff;
    }

    .iconfont:hover {
        color: #b6b6b6;
    }

    .box {
        width: 100%;
    }

    .boxf {
        margin-top: 40px;
        width: 100vw;
        /*height: 120vh;*/
        padding-bottom: 50px;
        background: url("../../src/assets/img/moblie.png") no-repeat;
        background-size: 100% 100%;
    }

    .formEntry {
        width: 100%;
        margin: 30px auto 0;
    }
    .sub {
        margin: 15px auto;
        width: 40%;
        display: flex;
        justify-content: space-between;
    }
    .input-title {
        width: 65%;
        height: 40px;
        margin: 8px auto 0;
        overflow: hidden;
    }

    .input-title span {
        width: 25%;
        font-size: 14px;
        font-weight: 600;
        height: 40px;
        color: #333;
        line-height: 40px;
        margin-right: 5px;
        float: left;
        text-align: right;
        display: block;
    }

    .input-title .inputs {
        width: 65%;
        font-size: 12px;
        font-weight: 600;
        height: 40px;
        color: #111;
        float: right;
    }

    .ipad {
        background: rgb(245, 245, 245);
    }

    .iphone8 {
        /*background:rgb(249,230,240);*/
    }

    .box .textf {
        padding-top: 88px;
    }

    .box .textf h1 {
        text-align: center;

        width: 100%;
        margin: 0 auto;
        font-size: 60px;
        font-weight: 600;
        color: #111;
    }

    .box .textf h2 {
        text-align: center;

        width: 100%;
        margin: 10px auto;
        font-size: 30px;
        font-weight: 400;
        color: #111;
    }

    .box .wrapper {
        margin-top: 15px;
        text-align: center;
    }

    .box .wrapper a {
        text-decoration: none;
        font-size: 25px;
        font-weight: 400;
        margin-right: 20px;
        color: #0070c9;
    }

    .box .shopimg {
        z-index: 1;
        margin: 60px auto 0;
        width: 1068px;
        height: 337px;
    }

    .box .iphoe_x {
        background: url("../assets/phone/behind_the_mac_large.jpg") no-repeat center;
    }

    .box .iphoe_8 {
        background: url("../assets/phone/iphone_8_large.jpg") no-repeat center;
        background-size: 537px 378px;
    }

    .box .ipd {
        background: url("../assets/phone/ipad_large.jpg") no-repeat center;
        background-size: 930px 355px;
    }

    .shop ul {
        list-style: none;
        width: 100%;
    }

    .shop ul li {
        width: 49%;
        height: 580px;
        margin: 12px 0.25% 12px 0.5%;
        float: left;
        background: rgb(238, 238, 238);
    }

    .shop ul li:nth-child(5) {
        background: rgb(250, 250, 250);
    }

    .shop ul li:nth-child(6) {
        background: rgb(250, 250, 250);
    }

    .bkimg {
        width: 100%;
        height: 100%;
    }

    .shop_top {
        width: 100%;
        height: 140px;
    }

    .shop_top .watch {
        display: block;
        width: 131px;
        height: 40px;
        margin: 0 auto;
        padding-top: 41px;
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        color: #111;
    }

    .shop_top .watchf {
        display: block;
        text-align: center;
        height: 40px;
        margin: 0 auto;
        padding-top: 41px;
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        color: #111;
    }

    .shop_top h4 {
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 80px;
        font-size: 40px;
        line-height: 1.2381;
        font-weight: 400;
        color: #fff;
    }

    .shop_top h5 {
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 24px;
        line-height: 1.2381;
        font-weight: 400;
        color: #fff;
    }

    .shop_top .color {
        color: #111;
    }

    .shop_bottom {
        text-align: center;
    }

    .shop_bottom a {
        font-size: 20px;
        font-weight: 400;
        color: #0070c9;
    }

    .shopone {
        background: url("../assets/phone/watch_series_3_large.jpg") no-repeat center
        bottom 0;
    }

    .shoptwo {
        background: url("../assets/phone/how_to_shoot_large.jpg") no-repeat center
        bottom 0;
    }

    .shopthree {
        background: url("../assets/phone/music_three_months_large.jpg") no-repeat
        center bottom 0;
    }

    .shopfour {
        background: url("../assets/phone/behind_the_mac_large.jpg") no-repeat center
        bottom 0;
    }

    .shopfive {
        background: url("../assets/phone/airpods_large.jpg") no-repeat center bottom 0;
    }

    .shopsix {
        background: url("../assets/phone/homepod_large.jpg") no-repeat center bottom 0;
    }

    .footer {
        width: 100%;
        background: rgb(242, 242, 242);
        margin-bottom: 0;
        overflow: hidden;
    }

    .foot_nav {
        width: 1000px;
        margin: 0 auto;
        background: rgb(242, 242, 242);
    }

    .foot_nav .toot_titf {
        margin-bottom: 7px;
        padding: 20px 0 8px;
        border-bottom: 1px solid #d6d6d6;
        font-size: 11px;
        color: #888;
    }

    .foot_nav .toot_titf a {
        color: #0070c9;
    }

    .foot_nav .toot_titf a:hover {
        text-decoration: underline;
    }

    .foot_nav .toot_tits {
        color: #888;
        padding: 0 0 30px;
        font-size: 11px;
    }

    .fromtxt {
        width: 100%;
        overflow: hidden;
        padding-top: 50px;
    }

    .foot_nav dl {
        width: 20%;
        float: left;
    }

    .foot_nav dl dt {
        font-weight: 600;
        display: block;
        margin-bottom: 9px;
        font-size: 9px;
    }

    .foot_nav dl dd {
        display: block;
        margin-bottom: 9px;
        color: #555;
        font-size: 11px;
    }

    .foot_nav dl dd a {
        color: #555;
    }

    .foot_nav dl dd a:hover {
        text-decoration: underline;
    }

    .foot_nav dl dt span {
        display: none;
    }

    .foot_nav dl dt span:hover {
        cursor: pointer;
    }

    .box .wrapper a:hover {
        text-decoration: underline;
    }

    .shop_bottom a:hover {
        text-decoration: underline;
    }

    .toot_tits .userleft {
        margin-top: 5px;
        margin-right: 30px;
        float: left;
    }

    .toot_tits .usercenters {
        margin-right: 30px;
        float: left;
    }

    .toot_tits .usercenters a {
        border-right: 1px solid #d6d6d6;
        margin-right: 7px;
        padding-right: 10px;
        display: inline-block;
        margin-top: 5px;
        white-space: nowrap;
        color: #555;
    }

    .toot_tits .usercenters a:hover {
        text-decoration: underline;
    }

    .toot_tits .usercenters a:nth-child(5) {
        border: none;
    }

    .toot_tits .userright {
        float: right;
        margin-top: 5px;
        position: relative;
        top: -3px;
        z-index: 2;
        white-space: nowrap;
    }

    .toot_tits .userright span {
        background-repeat: no-repeat;
        background-size: 16px 16px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(../assets/phone/16.png);
        padding-right: 5px;
        background-position: left center;
        cursor: pointer;
        float: left;
        margin-top: -1px;
    }

    .toot_tits .userright a {
        color: #555;
    }

    .toot_tits .userright a:hover {
        text-decoration: underline;
    }

    @media screen and (max-width: 1024px) {
        .conter {
            width: 100%;
        }

        .conter ul {
            padding: 0 14px;
        }

        .box .shopimg {
            width: 763px;
            height: 336px;
        }

        .box .iphoe_x {
            background-size: 736px 336px;
        }

        .box .iphoe_8 {
            background-size: 537px 378px;
        }

        .box .ipd {
            background-size: 650px 325px;
        }

        .foot_nav {
            width: 100%;
        }

        .toot_tits .userright {
            margin-top: 10px;
            margin-right: 10px;
        }

        .toot_tits .usercenters {
            margin: 5px 50px 30px 0;
        }

        .footer {
            padding-left: 16px;
        }
    }

    @media screen and (max-width: 768px) {
        .liebiao {
            display: block;
        }

        .text,
        .seerch {
            display: none;
        }


    }
    /*banner*/
    /* .banner img{
       float:left
   } */
    .img{
        float:left;
        width:100%;
        height: 205px;
    }
    .banner{
        overflow: hidden;
    }
    .trans{
        transition:all .5s
    }
    .view{
        width:100%;
        height: 205px;
        overflow: hidden;
        position: relative;
    }
    .uls{
        width: 100px;
        height: 20px;
        position: absolute;
        bottom: 10px;
        left: 40%;
    }
    .uls .lis{
        width: 10px;
        height: 10px;
        margin-right: 5px;
        list-style: none;
        border-radius: 50%;
        float: left;
        background: #ffffff;
    }
</style>